<template>
  <view class="verfi_container">
    <input
      type="digit"
      placeholder="请输入核销码"
      class="input"
      v-model="order_id"
    />
    <view class="btn_container flex-r">
      <van-button custom-class="btn" @tap="get_order_detail(order_id)">搜索</van-button>
      <van-button custom-class="btn" @tap="scan_code">扫码</van-button>
    </view>
    <view class="orderdetail_container" v-if="order_info.id">
      <view class="order_id text">订单号:{{ order_info.order_id }}</view>
      <view class="goods_title text">商品名称:{{ order_info.goods_name }}</view>
      <view class="spec text"
        >规格:{{ order_info.spec1 }}/{{ order_info.spec2 }}</view
      >
      <view class="pay_money text">实付款:{{ order_info.act_price }}元</view>
      <van-button custom-class="btn2" @tap="check_order" v-if="!succ">确认核销</van-button>
      <van-button custom-class="btn2" v-if="succ" @tap="go_order">核销成功,点击查看订单</van-button>
    </view>
  </view>
</template>

<script>
import Base64 from "../../utils/base64";
import { order_detail, check_order } from "../../utils/imapi";
export default {
  props: {},
  components: {},
  data() {
    return {
      succ:false,
      order_info: {},
      order_id: "",
    };
  },
  computed: {},
  watch: {},
  onLoad() {},
  onReady() {},
  onShow() {},
  methods: {
    scan_code() {
      const that = this;
      // 允许从相机和相册扫码
      uni.scanCode({
        success: function (res) {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
          console.log(Base64.decode(res.result));
          const id = JSON.parse(Base64.decode(res.result)).order_no;
          console.log(id);
          that.get_order_detail(id);
        },
      });
    },
    async get_order_detail(order_id) {
        console.log();
      if (!order_id)
        return uni.showToast({
          title: "请输入订单号",
          icon: "none",
        });
      try {
        const data = await order_detail({
          order_id,
        });
        console.log(data);
        if (data.code == 0) {
          this.succ = false;
          this.order_info = data.data;
        }
      } catch (error) {}
    },
    async check_order() {
      try {
        const data = await check_order({
          order_no: this.order_info.order_id,
        });
        console.log(data);
        if (data.code == 0) {
          uni.showToast({
            title: data.msg,
            icon: "none",
          });
          this.succ = true;
        } else {
          uni.showToast({
            title: data.msg,
            icon: "none",
          });
        }
      } catch (error) {}
    },
    go_order(){
      uni.navigateTo({
        url: "/pages/order_list/order_list",
      });
    },
  },
  onReachBottom() {},
  onHide() {},
};
</script>

<style scoped lang="scss" scoped>
page {
}
.verfi_container {
  display: flex;
  position: relative;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.input {
  width: 600rpx;
  height: 68rpx;
  background-color: #f0eefd;
  padding: 0 38rpx;
  margin: 54rpx auto 0;
  border-radius: 38rpx;
  .uni-input-placeholder {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9d9ca3;
  }
}
.btn_container {
  width: 100%;
  margin: 48rpx 0 72rpx;
  padding: 0 166rpx;
  /deep/ .btn {
    width: 188rpx;
    height: 72rpx;
    background: #FE3772;
    box-shadow: 0px 2rpx 6r3px 0px rgba(0, 0, 0, 0.5);
    border-radius: 36rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}

.orderdetail_container {
  flex: 1;
  width: 686rpx;
  margin-left: 32rpx;
  background-color: #fafafe;
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  padding: 36rpx 30rpx 0;
  .text {
    margin-bottom: 10rpx;
  }
  /deep/ .btn2 {
    width: 500rpx;
    height: 80rpx;
    background: #FE3772;
    border-radius: 12rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    margin-top: 272rpx;
    margin-left: 64rpx;
  }
}
</style>
